<template>
  <ToolbarItemContainer ref="container" :iconFile="workOrderIcon" title="会员权益" :needBottomPopup="true"
    :iconWidth="isUniFrameWork ? '26px' : '20px'" :iconHeight="isUniFrameWork ? '26px' : '20px'" @click="updateSidebarInfo">
  </ToolbarItemContainer>
  <el-dialog v-model="dialogVisible" title="会员权益" width="800px" :close-on-click-modal="false">
    <el-tabs v-model="activeName" class="demo-tabs">
    <el-tab-pane label="会员服务权益" name="first">
      <div class="title">基础服务权益</div>
      <el-table :data="basicInfo" border style="margin-bottom: 20px;">
        <el-table-column label="会员权益" prop="name" align="center"></el-table-column>
        <el-table-column label="总数量" prop="total" align="center">
          <template #default="scope">
            <div v-if="scope.row.type === 1">{{scope.row.total}}{{ scope.$index == 0 ? '次' : '分钟' }}</div>
            <div v-else>不限{{ scope.$index == 0 ? '次数' : '时长' }}</div>
          </template>
        </el-table-column>
        <el-table-column label="剩余数量" prop="count" align="center">
          <template #default="scope">
            <div v-if="scope.row.type === 1">{{scope.row.count}}{{ scope.$index == 0 ? '次' : '分钟' }}</div>
            <div v-else>不限{{ scope.$index == 0 ? '次数' : '时长' }}</div>
          </template>
        </el-table-column>
        <el-table-column label="已使用数量" prop="used" align="center">
          <template #default="scope">
            <div>{{scope.row.used}}{{ scope.$index == 0 ? '次' : '分钟' }}</div>
          </template>
        </el-table-column>
      </el-table>
      <div class="title">文本服务权益</div>
      <el-table :data="dataInfo?.find.workorder_rights" :span-method="objectSpanMethod" border style="margin-bottom: 20px;">
        <el-table-column label="服务类型" prop="right_name" align="center"></el-table-column>
        <el-table-column label="总数量" prop="total_count" align="center">
          <template #default="scope">
            <div v-if="scope.row.count_type === 1">{{scope.row.total_count}}次</div>
            <div v-else>不限次数</div>
          </template>
        </el-table-column>
        <el-table-column label="剩余数量" prop="remaining_count" align="center">
          <template #default="scope">
            <div v-if="scope.row.count_type === 1">{{scope.row.remaining_count}}次</div>
            <div v-else>不限次数</div>
          </template>
        </el-table-column>
        <el-table-column label="已使用数量" prop="used_count" align="center">
          <template #default="scope">
            <div>{{scope.row.used_count}}次</div>
          </template>
        </el-table-column>
      </el-table>
      <div class="title">线下服务权益</div>
      <el-table :data="dataInfo?.find.offline_rights" border style="margin-bottom: 20px;">
        <el-table-column label="服务类型" prop="title" align="center"></el-table-column>
        <el-table-column label="服务内容" prop="content" align="center"></el-table-column>
      </el-table>
    </el-tab-pane>
    <el-tab-pane label="已购买服务权益" name="second">
      <el-table :data="dataInfo?.purchased_rights" border style="margin-bottom: 20px;">
        <el-table-column label="权益类型" prop="right_name" align="center"></el-table-column>
        <el-table-column label="总数量" prop="purchased_count" align="center">
          <template #default="scope">
            {{scope.row.purchased_count}}{{scope.row.unit}}
          </template>
        </el-table-column>
        <el-table-column label="剩余数量" prop="remaining_count" align="center">
          <template #default="scope">
            {{scope.row.remaining_count}}{{scope.row.unit}}
          </template>
        </el-table-column>
        <el-table-column label="已使用数量" prop="used_count" align="center">
          <template #default="scope">
            <div>{{scope.row.used_count}}{{scope.row.unit}}</div>
          </template>
        </el-table-column>
      </el-table>
    </el-tab-pane>
  </el-tabs>
  </el-dialog>
</template>
<script setup lang="ts">
import { GetGroupVip } from '@/api';
import {
  IConversationModel,
  StoreName,
  TUIStore,
} from '@tencentcloud/chat-uikit-engine';
import type { TableColumnCtx } from 'element-plus';
import { ref, watch } from '../../../../adapter-vue';
import vipIconDark from '../../../../assets/icon/vip-dark.svg';
import vipIconLight from '../../../../assets/icon/vip-light.svg';
import { isUniFrameWork } from '../../../../utils/env';
import TUIChatConfig from '../../config';
import ToolbarItemContainer from '../toolbar-item-container/index.vue';

interface DataInfo {
    find:             Find;
    purchased_rights: PurchasedRight[];
}

interface Find {
    id:               number;
    menu_id:          number;
    name:             string;
    end_time:         Date;
    basic_rights:     BasicRights;
    workorder_rights: WorkorderRight[];
    offline_rights:   OfflineRight[];
}

interface BasicRights {
    id:                      number;
    user_set_menu_id:        number;
    contract_download_count: number;
    daily_consult_duration:  number;
    get_type:                number;
    create_time:             Date;
    update_time:             Date;
    expire_time:             Date;
    contract_download_total: number;
    contract_download_type:  number;
    daily_consult_total:     number;
    daily_consult_type:      number;
    contract_download_used:  number;
    daily_consult_used:      number;
}

interface OfflineRight {
    id:          number;
    menu_id:     number;
    content:     string;
    title:       string;
    create_time: Date;
}

interface WorkorderRight {
    cate_id:         string;
    right_name:      string;
    remaining_count: null;
    share_group:     string;
    count_type:      number;
    total_count:     null;
    used_count:      number;
    isTop:           boolean;
    rowspan:         number;
}

interface PurchasedRight {
    id:              number;
    right_type:      number;
    cate_id:         number | null;
    purchased_count: number;
    remaining_count: number;
    unit:            string;
    right_name:      string;
    used_count:      number;
}
interface Basic{
  name: string;
  count: number;
  total: number;
  used: number;
  type: number;
}

interface SpanMethodProps {
  row: WorkorderRight
  column: TableColumnCtx<WorkorderRight>
  rowIndex: number
  columnIndex: number
}

const workOrderIcon = TUIChatConfig.getTheme() === 'dark' ? vipIconDark : vipIconLight;

const container = ref();
const currentConversation = ref<IConversationModel>();

const activeName = ref('first');
const dialogVisible = ref(false);
const dataInfo = ref<DataInfo>()
const basicInfo = ref<Basic[]>([])

watch(
  () => dialogVisible.value,
  (val) => {
    if (val) {
      activeName.value = 'first'
    }
  }
)

const objectSpanMethod = ({
  row,
  column,
  rowIndex,
  columnIndex,
}: SpanMethodProps) => {
  if (columnIndex ==1 || columnIndex == 2) {
    if (row.isTop) {
      return {
        rowspan: row.rowspan,
        colspan: 1,
      }
    } else {
      return {
        rowspan: 0,
        colspan: 0,
      }
    }
  }
}


TUIStore.watch(StoreName.CONV, {
  currentConversation: (conversation: IConversationModel) => {
    currentConversation.value = conversation;
  },
});

function updateSidebarInfo() {
  dialogVisible.value = true;
  GetGroupVip({
    group_id: currentConversation.value?.groupProfile.groupID
  }).then(res => {
    dataInfo.value = res.data
    basicInfo.value = []
    if (dataInfo.value?.find.basic_rights) {
        // 检查是对象还是数组
        if (Array.isArray(dataInfo.value.find.basic_rights)) {
            // 无数据时是空数组 []
            console.log("无数据");
        } else {
            // 有数据时是对象
            const rights = dataInfo.value.find.basic_rights;
            basicInfo.value.push({
                name: '合同下载',
                count: rights.contract_download_count || 0,
                total: rights.contract_download_total || 0,
                used: rights.contract_download_used || 0,
                type: rights.contract_download_type || 0,
            });
            basicInfo.value.push({
                name: '法律在线咨询服务',
                count: rights.daily_consult_duration || 0,
                total: rights.daily_consult_total || 0,
                used: rights.daily_consult_used || 0,
                type: rights.daily_consult_type || 0,
            });
        }
    }
  })
}
</script>
<style lang="scss" scoped>
  .title{
    font-size: 16px;
    margin: 0 0 10px;
    color: #333;
  }
</style>
